<template>
  <div class="index-root-view-css">
    <div class="animate-area">
      <a-animate
          :transform="{
      type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA,
      valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
      values:[0,1],
      duration:1000
        }"
          :listen-animator="true"
          :execute="execute" @end="onEnd">
        <demo/>
      </a-animate>
      <a-animate
          :transform="{
      type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ROTATION,
      valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
      values:[0,360],
      duration:1000,
      repeatMode:QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE
        }"
          :execute="execute" >
        <demo/>
      </a-animate>
      <a-animate
          :transform="{
      type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ROTATION_X,
      valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
      values:[0,90,0],
      duration:1000,
      repeatMode:QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE
        }"
          :execute="execute" >
        <demo/>
      </a-animate>
      <a-animate
          :transform="{
      type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ROTATION_Y,
      valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
      values:[0,90,0],
      duration:1000,
      repeatMode:QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE
        }"
          :execute="execute" >
        <demo/>
      </a-animate>
      <a-animate
          :transform="{
      type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_X,
      valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
      values:[1,1.2,1],
      duration:1000,
      repeatMode:QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE
        }"
          :execute="execute" >
        <demo/>
      </a-animate>
      <a-animate
          :transform="{
      type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_Y,
      valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
      values:[1,1.2,1],
      duration:1000,
      repeatMode:QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE
        }"
          :execute="execute" >
        <demo/>
      </a-animate>
      <a-animate
          :transform="{
      type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
      valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
      values:[0,120,0],
      duration:1000,
      repeatMode:QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE
        }"
          :execute="execute" >
        <demo/>
      </a-animate>
      <a-animate
          :transform="{
      type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_Y,
      valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
      values:[0,120,0],
      duration:1000,
      repeatMode:QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE
        }"
          :execute="execute" >
        <demo/>
      </a-animate>

    </div>
    <div class="animate-area">
      <a-animate-group
          :transforms="[{
      type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_Y,
      valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
      values:[1,1.2,1],
      duration:1000,
      repeatMode:QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE
        },{
      type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_X,
      valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
      values:[1,1.2,1],
      duration:1000,
      repeatMode:QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE
        }
        ]"
          :execute="execute" >
        <demo/>
      </a-animate-group>
      <a-animate-group
          :transforms="[{
      type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_Y,
      valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
      values:[1,1.2,1],
      duration:1000,
      repeatMode:QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE
        },{
      type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_X,
      valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
      values:[1,1.2,1],
      duration:1000,
      repeatMode:QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE
        }
        ]"
          play-mode="sequential"
          :execute="execute" >
        <demo/>
      </a-animate-group>
      <a-animate-group
          :transforms="[{
      type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_Y,
      valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
      values:[0,120,0],
      duration:1000,
      repeatMode:QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE
        },
        {
          type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
          valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
          values:[0,120,0],
          duration:1000,
          repeatMode:QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE
          }]"
          :execute="execute" >
        <demo/>
      </a-animate-group>
      <a-animate-group
          :transforms="[{
      type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_Y,
      valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
      values:[0,120,0],
      duration:1000,
      repeatMode:QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE
        },
        {
          type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
          valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
          values:[0,120,0],
          duration:1000,
          repeatMode:QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE
          }]"
          play-mode="sequential"
          :execute="execute" >
        <demo/>
      </a-animate-group>
    </div>
    <qt-button round text="执行" @click="click" />
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from '@vue/runtime-core'
import AAnimate from "../../components/animate/AAnimate.vue";
import {QTAnimationPropertyName, QTAnimationRepeatMode, QTAnimationValueType} from "@quicktvui/quicktvui3";
import Demo from "../Demo.vue";
import AAnimateGroup from "../../components/animate/AAnimateGroup.vue";

export default defineComponent({
  name: 'sample',
  computed: {
    QTAnimationRepeatMode() {
      return QTAnimationRepeatMode
    },
    QTAnimationValueType() {
      return QTAnimationValueType
    },
    QTAnimationPropertyName() {
      return QTAnimationPropertyName
    }
  },
  components: {AAnimateGroup, Demo, AAnimate},
  setup() {
    const execute=ref(false)
    const click=()=>{
      execute.value=true
    }
    function onEnd(){
      execute.value=false
    }
    return {
      click,
      execute,
      onEnd
    }
  }
})
</script>

<style>
.index-root-view-css {
  width: 1920px;
  height: 1080px;
  background-color: #27292e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.animate-area{
  display: flex;
  flex-direction: row;
  padding: 20px;
  flex-wrap: wrap;
}
</style>
